<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>Title</title>

    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
        }
    </style>

    <script>
        window.onload = function () {
            var oBox = document.getElementById("box");
            oBox.onmousedown = function (ev) {
                var oEvent = ev || event;
                var disX = oEvent.clientX - oBox.offsetLeft;
                var disY = oEvent.clientY - oBox.offsetTop;
                document.onmousemove = function (ev) {
                    var oEvemt = ev || event;
                    var l = oEvemt.clientX - disX;
                    var t = oEvemt.clientY - disY;
                    if (l < 0) {
                        l = 0
                    } else if (l > document.documentElement.clientWidth - oBox.offsetWidth) {
                        l = document.documentElement.clientWidth - oBox.offsetWidth
                    }
                    if (t < 0) {
                        t = 0
                    } else if (t > document.documentElement.clientHeight - oBox.offsetHeight) {
                        t = document.documentElement.clientHeight - oBox.offsetHeight
                    }

                    oBox.style.left = l + "px";
                    oBox.style.top = t + "px";
                }

                document.onmouseup = function () {
                    document.onmousedown = null;
                    document.onmousemove = null;
                }
            }


        }
    </script>
</head>
<body>

<div id="box"></div>

</body>
</html>